<template>
    <div>
        <div>
            <el-button v-if="parent" type="primary" @click="push">增加</el-button>
            <el-button type="primary" @click="link">关联企业</el-button>
        </div>
        <div style="display:flex;margin-top: 10px;">
            <el-tree :data="data" show-checkbox @node-click="handleNodeClick" :expand-on-click-node="false"
                style="width:30%;">
                <span class="tree-node" slot-scope="{data}">
                    <span>{{ data.abbreviated }}</span>
                    <span>

                        <el-button v-if="data.type != '分公司'" type="primary" size="mini" @click="add(data)"
                            style="margin-left: 10px;">添加</el-button>
                        <!-- <el-button type="primary" size="mini" :expand-on-click-node="false" @click.stop="rowEdit()">编辑
                                                                        </el-button> -->
                        <el-button type="danger" size="mini" @click="rowDel(data.id)">删除</el-button>
                    </span>
                </span>
            </el-tree>

            <el-form v-if="formtree" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px"
                class="demo-ruleForm" style="width:60%;margin-left: 5%;">
                <el-form-item label="企业名称：" prop="companyName">
                    <el-input type="text" v-model="ruleForm.companyName">
                    </el-input>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="企业简称：" prop="abbreviated">
                            <el-input type="text" v-model="ruleForm.abbreviated">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="法人：" prop="corporate">
                            <el-input type="text" v-model="ruleForm.corporate">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="办公电话：" prop="phone">
                            <el-input type="text" v-model="ruleForm.phone">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="办公地址：" prop="address">
                            <el-input type="text" v-model="ruleForm.address">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="信用代码：" prop="creditCode">
                            <el-input type="text" v-model="ruleForm.creditCode">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="单位联系人：" prop="contact">
                            <el-input type="text" v-model="ruleForm.contact">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱：" prop="email">
                            <el-input type="text" v-model="ruleForm.email">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="微信号：" prop="wechat">
                            <el-input type="text" v-model="ruleForm.wechat">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="企业类型：" prop="type">
                    <el-radio v-if="ruleForm.type == '母公司'" v-model="ruleForm.type" label="母公司" disabled></el-radio>
                    <el-radio v-if="ruleForm.type == '子公司'" v-model="ruleForm.type" label="子公司" disabled></el-radio>
                    <el-radio v-if="ruleForm.type == '分公司'" v-model="ruleForm.type" label="分公司" disabled></el-radio>
                    <el-button type="text" class="pull-right" @click="getdrawer">查看资质证书 ></el-button>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="公众号：" prop="officialAccount" class="item">
                            <el-upload class="avatar-uploader" :action='actionAccount' list-type="picture-card"
                                :show-file-list="false" :on-success="accounthandleAvatarSuccess">
                                <img v-if="accountUrl" :src="accountUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公章：" prop="officialSeal" class="item">
                            <el-upload class="avatar-uploader" :action='actionSeal' list-type="picture-card"
                                :show-file-list="false" :on-success="sealhandleAvatarSuccess">
                                <img v-if="sealUrl" :src="sealUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="logo：" prop="logo" class="item">
                            <el-upload class="avatar-uploader" :action='actionLogo' list-type="picture-card"
                                :show-file-list="false" :on-success="logohandleAvatarSuccess">
                                <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                    </el-button>
                    <!-- <el-button @click="dialogClose" class="pull-right">取消</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <el-drawer title="资质证书" ref="drawer" :visible.sync="drawer" direction="rtl" size="30%">
            <el-form :model="zsForm" ref="zsForm" class="demo-formFileds">
                <el-form-item label="营业执照：" prop="yyzz">
                    <el-upload :action="yyzzactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove1" :on-change="handleChange1" :limit="1" :file-list="fileList1"
                        :class="{ hide_box1: upload_btn1 }">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="资质证明：">
                    <el-upload :action="zzzmactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove2" :on-change="handleChange2" :file-list="fileList2"
                        :class="{ hide_box2: upload_btn2 }" :limit="2">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitzsForm()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <div class="dialog">
            <el-dialog :visible.sync="dialogVisible" width="50%">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <!-- 弹出层 -->
        <EnterpriseAdd ref="enterpriseAddRef" v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" :type="type"
            :parent="parent" :qyid="qyid" :father="father" @dialogClose="dialogClose" @Ok="golist"></EnterpriseAdd>
        <Link ref="linkRef" v-if="linkShow" :linkShow="linkShow" :record="record" @dialogClose="dialogClose" @Ok="golist">
        </Link>
    </div>
</template>

<script>
import EnterpriseAdd from "./enterpriseAdd.vue";
import Link from "./link.vue";
import { selectByUserId, updateInformation, del, correlationParent, correlationId, correlation } from "@/api/systemManage/enterpriseMaage";

export default {
    name: "enterprise",
    components: {
        EnterpriseAdd,
        Link,
    },
    data () {
        return {
            qyid: '',
            drawer: false,
            dialogImageUrl: '',
            upload_btn1: false,
            upload_btn2: false,
            dialogVisible: false,
            fileList1: [],
            fileList2: [],
            zsForm: {},
            yyzzactionurl: '/api/company/yyzzUpload',
            zzzmactionurl: '/api/company/zzzmUpload',
            data: [],
            ruleForm: {},
            formtree: false,
            // linkData: [],
            actionAccount: '/api/company/gzhUpload',
            actionLogo: '/api/company/logoUpload',
            actionSeal: '/api/company/officialSealUpload',
            accountUrl: '',
            logoUrl: '',
            sealUrl: '',

            parent: true,
            type: '',
            record: '',
            father: 0,

            isShowAddDialog: false,
            linkShow: false,
            rules: {
                companyName: [
                    { required: true, message: '请输入企业名称', trigger: 'change' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'change' }
                ],
                abbreviated: [
                    { required: true, message: '请输入企业简称', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'change' }
                ],
                contact: [
                    { required: true, message: '请输入单位联系人姓名', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        handleNodeClick (data) {
            this.formtree = true
            var obj = {}
            this.ruleForm = Object.assign(obj, data)
            this.logoUrl = this.ruleForm.logo
            this.sealUrl = this.ruleForm.officialSeal
            this.accountUrl = this.ruleForm.officialAccount
        },

        sealhandleAvatarSuccess (file) {
            this.sealUrl = file.data;
            this.ruleForm.officialSeal = this.sealUrl;
        },
        logohandleAvatarSuccess (file) {
            this.logoUrl = file.data;
            this.ruleForm.logo = this.logoUrl;
        },
        accounthandleAvatarSuccess (file) {
            this.accountUrl = file.data;
            this.ruleForm.officialAccount = this.accountUrl;
        },
        dialogClose () {
            this.isShowAddDialog = false;
            this.linkShow = false;
            this.drawer = false;
        },
        submitForm () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    updateInformation(this.ruleForm).then((res) => {
                        if (res) {
                            this.$message.success('修改成功！')
                            this.golist()
                        }
                    })
                }
                else {
                    return
                }
            });
        },
        submitzsForm () {
            return new Promise((resolve, reject) => {
                if (this.fileList1.length == 1) {
                    if (!this.fileList1[0].response) {
                        this.zsForm.yyzz = this.fileList1[0].url
                    }
                    else {
                        this.zsForm.yyzz = this.fileList1[0].response.data
                    }
                } else {
                    this.zsForm.yyzz = ''
                }
                if (this.fileList2.length == 1) {
                    if (!this.fileList2[0].response) {
                        this.zsForm.zzzm = this.fileList2[0].url
                        this.zsForm.zzzm2=''
                    }
                    else {
                        this.zsForm.zzzm = this.fileList2[0].response.data
                        this.zsForm.zzzm2=''
                    }

                } else if (this.fileList2.length == 2) {
                    if (!this.fileList2[0].response) {
                        this.zsForm.zzzm = this.fileList2[0].url
                    }
                    else {
                        this.zsForm.zzzm = this.fileList2[0].response.data
                    }
                    if (!this.fileList2[1].response) {
                        this.zsForm.zzzm2 = this.fileList2[1].url
                    }
                    else {
                        this.zsForm.zzzm2 = this.fileList2[1].response.data
                    }
                } else {
                    this.zsForm.zzzm = ''
                    this.zsForm.zzzm2 = ''
                }
                resolve(this.zsForm)
            }).then(data => {
                updateInformation(data).then((res) => {
                    if (res) {
                        this.$message.success('上传成功！')
                        this.drawer = false
                    }
                })
            }).catch(()=>{
                
            })



        },
        rowDel (id) {
            this.$confirm('确定要删除当前公司吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                del('id=' + id).then((res) => {
                    if (res) {
                        this.$message.success('删除成功！');
                        this.golist();
                        this.ruleForm = []
                    }
                })
            });
        },
        push () {
            if (this.data == null) {
                this.type = '空'
                this.qyid = -1
            } else if (this.data[0].type == '子公司') {
                this.type = '子'
                this.qyid = this.data[0].id
            }
            this.isShowAddDialog = true
        },
        add (data) {
            this.type = data.type
            this.father = data.id
            this.isShowAddDialog = true
        },

        link () {
            if (!this.data) {
                this.$message.warning('请先添加公司！')
            } else {
                let params = localStorage.getItem('userId')
                correlationId('userId=' + params).then((res) => {
                    if (res.data) {
                        this.record = res.data
                        this.linkShow = true
                    }
                })
            }

        },
        golist () {
            let params = localStorage.getItem('userId');

            selectByUserId('userId=' + params).then((res) => {
                this.data = res.data
                if (this.data == null || this.data[0].type == '子公司') {
                    this.parent = true
                } else {
                    this.parent = false
                }
            })
        },
        getdrawer () {
            this.zsForm = this.ruleForm
            this.fileList1 = []
            this.fileList2 = []
            this.upload_btn1 = false
            this.upload_btn2 = false
            this.getTheDrawer()
        },
        getTheDrawer () {
            this.drawer = true
            if (this.zsForm.yyzz) {
                this.fileList1.push({})
                this.fileList1[0].url = this.zsForm.yyzz
                this.upload_btn1 = true
            }
            if (this.zsForm.zzzm) {
                this.fileList2.push({})
                this.fileList2[0].url = this.zsForm.zzzm
            }
            if (this.zsForm.zzzm2) {
                this.fileList2.push({})
                this.fileList2[1].url = this.zsForm.zzzm2
                this.upload_btn2 = true
            }

        },
        handleRemove1 (file, filelist) {
            this.upload_btn1 = false
            this.fileList1 = filelist
        },
        handleRemove2 (file, filelist) {
            this.fileList2 = filelist
            if (filelist.length == 0) {
                this.fileList2 = []
            }
            if (filelist.length < 2) {
                this.upload_btn2 = false
            }
            // console.log('filst', this.fileList2)
        },
        handleChange1 (file, filelist) {
            this.upload_btn1 = true
            this.fileList1 = filelist
        },
        handleChange2 (file, filelist) {
            if (filelist.length == 2) {
                this.upload_btn2 = true
            }
            this.fileList2 = filelist
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    },
    mounted () {
        this.golist();
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}

.tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding-right: 8px;
}

:deep .el-tree-node__content {
    height: 35px;
}

:deep .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
}

:deep .el-form-item__label {
    position: relative;
    display: inline-block;
    text-align-last: justify;
}

.item :deep .el-form-item__label {
    text-align-last: right;
    font-size: 13px;
}

.demo-ruleForm :deep .el-form-item--medium .el-form-item__label::before {
    display: none;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}

/deep/.el-drawer__header {
    background-color: #2EB3FF;
    align-items: center;
    color: #fff;
    height: 60px;
    margin-bottom: 15px;
    font-weight: bold;

}

.dialog :deep .el-dialog__header {
    display: none;
}

.hide_box1 /deep/ .el-upload--picture-card {
    display: none;
}

.hide_box2 /deep/ .el-upload--picture-card {
    display: none;
}
</style>